const DISTANCE = 100
const DURATION = 600

const animationMap = new WeakMap()

const ob = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      const animation = animationMap.get(entry.target)
      animation.play()
      ob.unobserve(entry.target)
    }
  }
})

function isBelowViewPort(el) {
  const rect = el.getBoundingClientRect()
  return rect.top > window.innerHeight
}

export default {
  mounted(el) {

    const animation = el.animate([
      {
        transform: `translateY(${DISTANCE}px)`,
        opacity: 0.5,
        scale: 0.95
      },
      {
        transform: `translateY(0)`,
        opacity: 1,
        scale: 1
      }
    ], {
      duration: DURATION,
      easing: 'ease-in-out'
    }
    )
    animation.pause()
    animationMap.set(el, animation)
    ob.observe(el)



  },
  unmounted(el) {
    ob.unobserve(el)
  },
}